<template>
    <div>
        <el-container style="height: 100vh;">
            <el-aside :width="asideWidth||'200px'" style="overflow-x: hidden;">
                <div style="background-color: #ffffff;padding: 20px 0;text-align: center;color: #000000;white-space: nowrap;font-weight: bold;">
                  <span>
                    <img src="../../assets/logo.png" style="width: 60%">
                  </span>
                </div>
              <hr style="height: 1px;background-color: #D8E6E7;border: none"/>
                <el-menu
                        :default-active="defaultActive"
                        router
                        background-color="#ffffff"
                        text-color="#808191"
                        active-text-color="#1890FF"
                        unique-opened
                        @select="menuSelect">
                  <el-menu-item index="/admin/index" class="index">
                      <i class="el-icon-odometer"></i>
                      <span slot="title">控制台</span>
                  </el-menu-item>
                  <el-menu-item index="" class="index">
                    <i class="el-icon-notebook-1"></i>
                    <span slot="title">课程管理</span>
                  </el-menu-item>
                  <el-menu-item index="/examination/exam">
                    <i class="el-icon-tickets"></i>
                    <span slot="title">考试管理</span>
                  </el-menu-item>

                  <el-menu-item index="/examination/questionBank">
                    <i class="el-icon-bank-card"></i>
                    <span slot="title">题库管理</span>
                  </el-menu-item>

                  <el-menu-item index="">
                    <i class="el-icon-s-data"></i>
                    <span slot="title">成绩分布</span>
                  </el-menu-item>

                  <el-submenu index="2">
                    <template slot="title"><i class="el-icon-s-promotion"></i>系统管理</template>
                    <el-menu-item index="/system/user">
                      <i class="el-icon-user"></i>
                      <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="/system/role">
                      <i class="el-icon-medal"></i>
                      <span slot="title">角色管理</span>
                    </el-menu-item>
                    <el-menu-item index="/system/permission">
                      <i class="el-icon-collection-tag"></i>
                      <span slot="title">权限管理</span>
                    </el-menu-item>
                  </el-submenu>
                  <el-menu-item index="/monitor/dataMonitor">
                    <i class="el-icon-s-platform"></i>
                    <span slot="title">数据监控</span>
                  </el-menu-item>
                  <el-menu-item index="">
                    <i class="el-icon-s-opportunity"></i>
                    <span slot="title">日志</span>
                  </el-menu-item>

<!--                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-s-tools"></i>考试管理</template>
                        <el-menu-item index="/examination/exam">
                            <i class="el-icon-data-line"></i>
                            <span slot="title">考试管理</span>
                        </el-menu-item>

                        <el-menu-item index="/examination/questionBank">
                            <i class="el-icon-data-analysis"></i>
                            <span slot="title">题库管理</span>
                        </el-menu-item>

                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-s-promotion"></i>系统管理</template>
                        <el-menu-item index="/system/user">
                            <i class="el-icon-user-solid"></i>
                            <span slot="title">用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="/system/role">
                            <i class="el-icon-medal"></i>
                            <span slot="title">角色管理</span>
                        </el-menu-item>
                        <el-menu-item index="/system/permission">
                            <i class="el-icon-collection-tag"></i>
                            <span slot="title">权限管理</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-s-tools"></i>系统监控</template>
                        <el-menu-item index="/monitor/dataMonitor">
                            <i class="el-icon-data-line"></i>
                            <span slot="title">数据监控</span>
                        </el-menu-item>
                    </el-submenu>-->
                </el-menu>
            </el-aside>
            <el-container>
                <el-header
                        style="text-align: center; font-size: 20px;color: #ffffff;cursor: pointer;position: relative;
                        margin:50px;height: 120px;border-radius: 15px;background-color: #0071dc">

                  <i class="el-icon-menu wr-15" style="position:absolute;right: -80px;line-height: 50px" @click="drawer = true"></i>
                  <i class="el-icon-s-fold wr-15" style="position:absolute;right: -50px;line-height: 50px;" @click="slideToggle"></i>
                  <el-dropdown style="font-size: 14px; float: left;margin-left: 50px">
                        <span class="el-dropdown-link" style="color: #ffffff;font-size: 24px;font-family: 微软雅黑">
      <!--                    <el-breadcrumb style="position: absolute;left: 60px;line-height: 120px;" separator="/">-->
      <!--                        <el-breadcrumb-item :to="{ path: '/admin/index' }">首页</el-breadcrumb-item>-->
      <!--                        <el-breadcrumb-item style="color:#ffffff">{{navData.one}}</el-breadcrumb-item>-->
      <!--                        <el-breadcrumb-item>{{navData.two}}</el-breadcrumb-item>-->
      <!--                    </el-breadcrumb>-->
                          <img src="../../assets/user.jpg">
                          <span>{{ name }}</span>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="$router.push('/admin/self')">个人资料</el-dropdown-item>
                            <el-dropdown-item divided @click.native="logout">退出系统</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>
                <el-main style="overflow-x: hidden;padding:15px;">
                    <transition name="slide-fade">
                        <router-view style="overflow: hidden;"/>
                    </transition>
                </el-main>

            </el-container>
        </el-container>
        <el-drawer
                ref="drawer"
                :modal="false"
                :visible.sync="drawer"
                direction="btt"
                size="250px"
                :show-close="false"
                title="快捷菜单"
                :with-header="true">
            <IMenu/>
        </el-drawer>
    </div>
</template>
<script>
    import IMenu from "@/components/menu/IMenu";

    export default {
        data() {
            return {
                defaultActive: "/admin/index",
                asideWidth: "280px",//菜单宽度
                drawer: false,
                name: this.$store.state.user.name,
                navData: {
                    "one": null,
                    "two": null,
                    "admin": {
                        "base": "管理",
                        "index": "控制台",// /admin/index ==> 后台/控制台
                        "self": "个人信息",
                    },
                    "examination": {
                        "base": "考试管理",
                        "exam": "考试管理", // /examination/exam  ==> 考试管理/考试管理
                        "questionBank": "题库管理",
                        "testPaper": "试卷详情",
                    },
                    "system": {
                        "base": "系统管理",
                        "user": "用户管理",
                        "role": "角色管理",
                        "permission": "权限管理",
                    },
                    "monitor": {
                        "base": "系统监控",
                        "dataMonitor": "数据监控",
                    },

                }
            }
        },
        components: {
            IMenu
        },
        mounted() {
            this.defaultActive = this.$route.path
            this.changeNav(this.$route.path)
        },
        computed: {
            closeDrawerCount() {
                return this.$store.state.closeDrawerCount
            }
        },
        watch: {
            closeDrawerCount(newCount, oldCount) {
                this.drawer = false
            },
            $route(to, from) {
                this.defaultActive = to.path
                //面包屑导航
                this.changeNav(to.path)
            }
        },
        methods: {
            logout() {
                this.$confirm("确定退出？", '提示', {type: "warning"}).then(() => {
                    sessionStorage.clear()
                    this.$router.push("/login")
                    this.$message({
                        type: "success",
                        message: "退出成功!"
                    });
                })
            },
            menuSelect(a, arr) {
            },
            slideToggle() {
                this.asideWidth = this.asideWidth != "0" ? "0" : "200px";
            },
            changeNav(path) {
                let pathArr = path.split("/")
                pathArr.shift()
                //一级
                this.navData.one = this.navData[pathArr[0]]["base"]
                //二级
                this.navData.two = this.navData[pathArr[0]][pathArr[1]]


            }
        },

    };
</script>
<style lang="scss" scoped>
    .el-header {
        background-color: #ffffff;
        line-height: 140px;
        box-shadow: 0 2px 10px #c4c4c4;
        z-index: 1;
        user-select: none;
    }

    .el-aside {
        color: #ffffff;
        box-shadow: 3px 0 10px #c4c4c4;
        z-index: 2;
        background-color: #ffffff;
        border-right: none;
        transition: width 0.5s;
    }

    .el-container {
        width: 100%;
    }

    .el-menu {
        border-right: none;
    }

    .el-menu-item:not(.index) {
        background-color: #ffffff !important;
    }

    .is-active {
    }

    .wr-15 {
        margin-right: 115px;
    }

    .slide-fade-enter-active {
        -webkit-transition: all 1s ease;
    }

    .slide-fade-leave-active {
        -webkit-transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave {
        -webkit-transform: translateX(50px);
        opacity: 0;
    }
    .el-dropdown {
        height: 100%;
    }
    .el-dropdown-link {
        position: relative;
        display: inline-block;
        margin: 0;
        height: 100%;
        width: 180px;
        line-height: 120px;
        img {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 80px;
        }
        span {
            position: absolute;
            left: 90px;
            top: 50%;
            transform: translateY(-50%);
            margin: 0;
        }
    }


</style>

